<template>
  <div>
    <el-form>
      <el-form-item>
        <el-select v-model="mid" placeholder="请选择地点">
          <el-option label="" value=""></el-option>
          <el-option
            v-for="item in findMidList"
            :key="item.id"
            :label="item.address"
            :value="item.id"
          />
        </el-select>
        <el-select
          v-model="id"
          placeholder="请选择电站"
          @click="powerLists(mid)"
        >
          <el-option label="" value=""></el-option>
          <el-option
            v-for="item in findPowerList"
            :key="item.id"
            :label="item.powerName"
            :value="item.id"
          />
        </el-select>
        <el-select
          v-model="pid"
          placeholder="请选择电柜"
          @click="powerStatesLists(id)"
        >
          <el-option label="" value=""></el-option>
          <el-option
            v-for="item in findPowerStatesList"
            :key="item.id"
            :label="item.pname"
            :value="item.id"
          />
        </el-select>
        <el-select v-model="status" placeholder="请选择电池状态">
          <el-option label="未充满" value="0" :key="0"></el-option>
          <el-option label="充满未租" value="1" :key="1"></el-option>
          <el-option label="充满已租" value="2" :key="2"></el-option>
          <el-option label="维修" value="3" :key="3"></el-option>
          <el-option label="预约" value="4" :key="4"></el-option>
        </el-select>
        <el-button type="primary" @click="findAll">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData.records" style="width: 100%">
      <el-table-column prop="address" label="位置" />
      <el-table-column prop="powerName" label="所属电站" />
      <el-table-column prop="pname" label="电柜编号" />
      <el-table-column prop="dname" label="电瓶编号" />
      <el-table-column prop="status" label="电瓶状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="warning">未充满</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="success">
            充满未租
          </el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="info">
            充满已租
          </el-tag>
          <el-tag v-else-if="scope.row.status === 3" type="danger">维修</el-tag>
          <el-tag v-else-if="scope.row.status === 4">预约</el-tag>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-button type="success" @click="handleEdit(scope.row.id)">
            修改状态
          </el-button>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-button type="primary" @click="showBattery(scope.row.id)">
            查看电池记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="Tips">
      <span>
        <el-form>
          <el-form-item>
            <el-radio-group v-model="findPowerStates.status">
              <el-radio :value="0" :label="0">未充满</el-radio>
              <el-radio :value="0" :label="1">充满未租</el-radio>
              <el-radio :value="0" :label="2">充满已租</el-radio>
              <el-radio :value="0" :label="3">维修</el-radio>
              <el-radio :value="0" :label="4">预约</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateStates">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <div>
    <el-pagination
      :current-page="tableData.currents"
      :page-size="tableData.size"
      :page-sizes="[1, 2, 3, 4, 10, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
  findId,
  managerList,
  midList,
  powerList,
  powerStatesList,
  updateState,
} from '@/api/manager'
import { ElMessage } from 'element-plus'
import router from '@/router'
const tableData = ref([])
const offsets = ref(1)
const pageSizes = ref(3)
const mid = ref()
const id = ref()
const pid = ref()
const status = ref()
const findMidList = ref()
const findPowerList = ref()
const findPowerStatesList = ref()
const findPowerStates = ref()
const dialogVisible = ref(false)
function showBattery(id) {
  window.sessionStorage.setItem('batteryId', JSON.stringify(id))
  router.push({
    path: '/battery',
    query: {
      id: id,
    },
  })
}
function handleEdit(id) {
  findId(id).then(res => {
    dialogVisible.value = true
    findPowerStates.value = res.result
  })
}
function updateStates() {
  updateState(findPowerStates.value).then(res => {
    if (res.code === 200) {
      ElMessage.success('修改成功')
      findAll()
      dialogVisible.value = false
    } else {
      ElMessage.error('修改失败')
    }
  })
}
function handleSizeChange(val) {
  console.log(`${val} items per page`)
  pageSizes.value = val
  findAll()
}
function handleCurrentChange(val) {
  offsets.value = val
  findAll()
  console.log(`current page: ${val}`)
}
function findAll() {
  managerList(
    offsets.value,
    pageSizes.value,
    mid.value,
    id.value,
    pid.value,
    status.value
  ).then(res => {
    if (res.code === 200) {
      tableData.value = res.result
      console.log('status==========', status.value)
      console.log(res.result)
    }
  })
}
function midLists() {
  midList().then(res => {
    findMidList.value = res.result
    console.log('findMidList.value=====', findMidList.value)
  })
}
function powerLists(mid) {
  powerList(mid).then(res => {
    findPowerList.value = res.result
    console.log('findMidList.value=====', findMidList.value)
  })
}
function powerStatesLists(id) {
  powerStatesList(id).then(res => {
    findPowerStatesList.value = res.result
    console.log('findMidList.value=====', findMidList.value)
  })
}
midLists()
powerStatesLists()
findAll()
</script>

<style scoped></style>
